import React, { useEffect, useState } from 'react';
import { PageContainer, ProForm, ProFormText, ProFormSelect, ProFormUploadButton } from '@ant-design/pro-components';
import {Button, message} from 'antd';
import { getLoginUserUsingGet,updateUserUsingPost, userLogoutUsingPost } from '@/services/Kapi-backend/userController';
import { useNavigate } from 'react-router-dom';
import { useModel } from 'umi';
import ProCard from "@ant-design/pro-card";
import {VerticalAlignBottomOutlined} from "@ant-design/icons";

interface UserFormValues {
  id: number;
  userAccount: string;
  userName: string;
  gender: number;
  userAvatar: string;
  userRole: string;
  userPassword: string;
}

const UserEditPage: React.FC = () => {
  const [form] = ProForm.useForm<API.UserVO>();
  const navigate = useNavigate();
  const { initialState, setInitialState } = useModel('@@initialState');
  const [loading, setLoading] = useState(false);

  const fetchUserInfo = async () => {
    setLoading(true);
    try {
      const response = await getLoginUserUsingGet();
      if (response.code === 0 && response.data) {
        console.log(response.data);
        const {data}  = response;
        form.setFieldsValue({
          id:data.id,
          userName: data.userName,
          userAccount: data.userAccount,
          gender: data.gender,
          userAvatar: data.userAvatar,
          userRole: data.userRole,
        });
      } else {
        message.error('获取用户信息失败，请稍后重试');
      }
    } catch (error) {
      message.error('获取用户信息失败，请稍后重试');
    } finally {
      setLoading(false);
    }
  };

  const handleSubmit = async (values: UserFormValues) => {
    setLoading(true);
    try {
      const response = await updateUserUsingPost(values);
      if (response.code === 0) {
        message.success('用户信息修改成功');
        fetchUserInfo();

        // // 调用退出登录接口
        // await userLogoutUsingPost();
        //
        // // 清理用户状态
        // setInitialState((prevState) => ({
        //   ...prevState,
        //   currentUser: undefined,
        // }));

        // 重定向到登录页面
        // navigate('/');
      } else {
        message.error(response.message || '用户信息修改失败');
      }
    } catch (error) {
      message.error('用户信息修改失败，请稍后重试');
    } finally {
      setLoading(false);
    }
  };

  // const beforeUpload = (file) => {
  //   const isJpgOrPng = file.type === 'image/jpeg' || file.type === 'image/png';
  //   if (!isJpgOrPng) {
  //     message.error('你只能上传 JPG 或 PNG 文件！');
  //     return false;
  //   }
  //   const isLt2M = file.size / 1024 / 1024 < 2;
  //   if (!isLt2M) {
  //     message.error('图片大小必须小于 2MB！');
  //     return false;
  //   }
  //   return true;
  // };

  useEffect(() => {
    fetchUserInfo();
  }, []);

  return (
    <PageContainer title="用户信息修改">
      <div style={{display: 'flex', justifyContent: 'center', alignItems: 'center', height: '100%'}}>
        <ProForm<UserFormValues>
          form={form}
          layout="horizontal"
          onFinish={handleSubmit}
          submitter={{
            searchConfig: {
              submitText: '保存',
            },
            render: (_, dom) => [...dom],
          }}
        >
          <ProFormText
            width="md"
            name="id"
            label="ID"
            placeholder="请输入ID"
            hidden
          />
          <ProFormText
            width="md"
            name="userAccount"
            label="账号"
            placeholder="请输入账号"
            disabled
            rules={[
              {
                message: '请输入账号',
              },
            ]}
          />
          <ProFormText
            width="md"
            name="userName"
            label="姓名"
            placeholder="请输入姓名"
            rules={[
              {
                message: '请输入姓名',
              },
            ]}
          />
          <ProFormSelect
            width="md"
            name="gender"
            label="性别"
            placeholder="请选择性别"
            options={[
              {label: '男', value: 1},
              {label: '女', value: 2},
              {label: '其他', value: 3},
            ]}
          />
          {/*<ProFormUploadButton*/}
          {/*  width="md"*/}
          {/*  name="userAvatar"*/}
          {/*  label="头像"*/}
          {/*  max={1}// 替换为你的实际上传接口*/}
          {/*/>*/}
          <ProFormSelect
            width="md"
            name="userRole"
            label="角色"
            disabled
          />
          <ProFormText.Password
            width="md"
            name="userPassword"
            label="密码"
            placeholder="请输入密码"
            rules={[
              {
                message: '请输入密码',
              },
            ]}
          />
        </ProForm>
      </div>
      <br/>
      <ProCard
        type="inner"
        tooltip="快速接入API接口"
        title={<strong>开发者SDK</strong>}
        bordered
      >
        <Button size={'large'}>
          <a target={'_blank'} href={'https://gitee.com/kang123132132/kapi-client-sdk.git'} rel="noreferrer">
            <VerticalAlignBottomOutlined/> Java SDK
          </a>
        </Button>
      </ProCard>
    </PageContainer>
  );
};

export default UserEditPage;
